<template>
  <div class="wrap">
    <div class="log">
      <h2>欢迎登录MMALL管理系统</h2>
      <el-input v-model="username" placeholder="请输入账号"></el-input>
      <el-input
        placeholder="请输入密码"
        v-model="password"
        show-password
      ></el-input>
      <el-row>
        <el-button type="primary" @click="login">登录</el-button>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getlogin } from "@/utils/request.js";
export default {
  name: "Login",
  data() {
    return {
      username: "admin",
      password: "admin",
    };
  },
  created() {},
  methods: {
    login() {
      let obj = { username: this.username, password: this.password };
      getlogin(obj).then((res) => {
          // console.log(res);
        if (this.username == "admin" && this.password == "admin") {
          sessionStorage.setItem("token", JSON.stringify(res.data.username));
          this.$router.push('/myhome')
        } else {
          alert("账户或者密码错误");
          return;
        }
      });
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100vh;
  background: rgb(213, 223, 187);
  position: relative;
  h2 {
    margin: 20px 0;
  }
  .log {
    width: 800px;
    height: 400px;
    border: 1px solid #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    text-align: center;
    .el-input {
      width: 80%;
      margin: 20px 0;
    }
    .el-button {
      width: 80%;
      margin-top: 20px;
    }
  }
}
</style>
